﻿@model TCMS.Models.TaskEntity
@{
    ViewBag.Title = "Index";
    Layout = "~/Views/Shared/_Layout.cshtml";
}
@section inlinestyle {
#toolbar_wrapper { background: #ccc; } 
#toolbar_wrapper h4 { float: left; line-height: 36px; margin: auto;} 
#toolbar_wrapper .btn-group { margin: 3px 5px 0 0; float: right; } 
.toolbar { background: #ccc; padding-top: 4px; float: right; } 
.toolbar label { text-align: right; line-height: 30px; } 
form.cmxform label.error { text-align: left; color: red; font-style: italic; font-size: 12px; } 
form.cmxform label { text-align: right; } .flexigrid { font-family: "Microsoft Yahei"; font-size: 12px; } 
.server_error { color: #f00;} 
a.cell { display: block; text-overflow: ellipsis; overflow: hidden; word-wrap: break-word; word-break: break-all; }
.input-append input { font-size: 14px; }
}
<div id="toolbar_wrapper" class="clearfix">
    <h4>已经提交的任务计划</h4>
    <div class="toolbar">
        @if (HttpContext.Current.User.IsInRole("staff"))
        { 
            <div class="span4">
                <button id="task_new" class="btn"><i class="icon-plus"></i>创建任务</button>
            </div>
        }
        <div class="span2">
            <label>起始日期：</label>
        </div>
        <div class="span4 input-append">
            <input class="span3" type="text" id="from" name="from" value="@ViewBag.From"/>
            <span class="add-on"><i class="icon-calendar"></i></span>
        </div>
        <div class="span2">
            <label>截止日期：</label>
        </div>
        <div class="span4 input-append">
            <input class="span3" type="text" id="to" name="to" value="@ViewBag.To"/>
            <span class="add-on"><i class="icon-calendar"></i></span>
        </div>
        <div class="span1">
            <button id="task_search" class="btn btn-mini" style="margin-top: 4px;"><i class="icon-search">
            </i></button>
        </div>
    </div>
</div>
<div id="myGrid">
</div>
<div id="dialog-form" title="创建新任务" style="display: none">
    <p class="validateTips">下列项目为必填项</p>
    @Html.Partial("Create", new { ShopFloors = ViewBag.ShopFloors })
</div>
@section links {
    <link rel="stylesheet" href="~/Content/bootstrap/css/bootstrap.css" />
    <link rel="stylesheet" href="~/Content/font-awesome/css/font-awesome.css" />
    <link rel="stylesheet" href="~/Content/jqueryui/css/jquery-ui.css" />
    <link rel="stylesheet" href="~/Content/timepicker/jquery-ui-timepicker-addon.css" />
    <link rel="stylesheet" href="~/Content/ligerUI/skins/Aqua/css/ligerui-common.css" />
    <link rel="stylesheet" href="~/Content/ligerUI/skins/Aqua/css/ligerui-grid.css" />
}
@section scripts {
    @Scripts.Render("~/bundles/js/jquery_ui_validate_ligerui")
    <script type="text/javascript">

        $(function() {
            // disable cache for ajax 'get' operations
            $.ajaxSetup({ cache: false });

            function msjsonDate(value) {
		        var newdate = new Date(parseInt(value.replace("/Date(", "").replace(")/",""), 10));
		        return $.datepicker.formatDate('yy年mm月dd日', newdate);
            }

	        var formDialog,
                taskForm,
                grid = $("#myGrid").ligerGrid({
                    columns: [
                        { display: '任务名称', name: 'Name', align: 'left', minWidth: 200, render: function(value) {
                            var result = '<a class="cell" href="@Url.Action("Status", "Task")/' + value.ID;
                    	    if (value.Status === 0) {
                                result += '" title="已完成"> <i class="text-success icon-ok"></i> ' + value.Name;
                            } else if (value.Status === 1) {
                                result += '" title="进行中"> <i class="text-warning icon-play"></i> ' + value.Name;
                            } else {
                                result += '" title="尚未开始"> <i class="text-error icon-stop"></i> ' + value.Name;
                            }

                            result += '</a>';

                            return result;
                        }},
                        { display: '产品名称', name: 'ProductName', align: 'left', minWidth: 200 },
                        { display: '工房', name: 'ShopName' },
                        { display: '起始时间', name: 'StartTime', render: function(value) {
                            return msjsonDate(value.StartTime);
                        }},
                        { display: '截止时间', name: 'EndTime', render: function(value) {
                            return msjsonDate(value.EndTime);
                        }},
                        { display: '主要危险品', name: 'DangerousProducts' },
                        { display: '在制量', name: 'InPopulating' },
                        { display: '危险工序', name: 'DangerousProcedure' },
                        { display: '带班长', name: 'TeamLeader' },
                        { display: '班组联系电话', name: 'TeamTel' }
                    ], 
                    url: "@Url.Action("Search", "Task")",
                    parms: [{
                        name: 'from',
                        value: $('#from').val()
                    }, {
                        name: 'to',
                        value: $('#to').val()
                    }],
                    method: 'get',
                    contentType: 'json',
                    pageSize: 100,
                    width: 926, 
                    height: '99%', 
                    checkbox: false
                });
            $("#pageloading").hide();

	        $('#task_search').click(function () {
                grid.loadServerData({ from: $('#from').val(), to: $('#to').val() });
	        });

            formDialog = $("#dialog-form").dialog({
	            autoOpen: false,
	            resizable: false,
	            modal: true,
	            width: 580,
                close: function() {
                    $('.server_error').empty();
                },
	            buttons: {
	                "创建": function () {
                        //$('.ui-dialog').width('520px')；
	                    $("#taskForm").submit();
	                },
	                "取消": function () {
	                    $(this).dialog('close');
	                    taskForm.resetForm();
	                }
	            }
	        });

	        taskForm = $("#taskForm").validate({
                messages: {
                    Name: "请输入<strong>任务名称</strong>",
                    ShopName: "请选择<strong>工房</strong>",
                    ProductName: "请输入<strong>产品</strong>",
                    StartTime: "请选择<strong>起始时间</strong>",
                    EndTime: "请选择<strong>截止时间</strong>",
                    Batch: "请输入<strong>批次</strong>",
                    InPopulating: "请输入<strong>在制量</strong>"
                },
                errorPlacement: function(error, element) {
			        error.appendTo( element.parent("div") );
		        },
	            invalidHandler: function (form, validator) {
	                $("#dialog-form").dialog('open');
	            },
	            submitHandler: function (form) {
	                $(form).ajaxSubmit({
	                    success: function () {
					        grid.loadServerData({ from: $('#from').val(), to: $('#to').val() });
	                        formDialog.dialog('close');
					        $(form).resetForm();
	                    },
                        error: function(jqXHR, textStatus, errorThrown) {
                            $('.server_error').html(jqXHR.responseText);
                        }
	                });
	            }
	        });

	        $('#task_new').click(function () {
	            formDialog.dialog('open');
	        });

            $.datepicker.setDefaults({ // Default regional settings
	            closeText: '完成', // Display text for close link
	            prevText: '向前', // Display text for previous month link
	            nextText: '向后', // Display text for next month link
	            currentText: '今天', // Display text for current month link
	            monthNames: ['一月','二月','三月','四月','五月','六月',
		            '七月','八月','九月','十月','十一月','十二月'], // Names of months for drop-down and formatting
	            monthNamesShort: ['一月','二月','三月','四月','五月','六月','七月','八月','九月','十月','十一月','十二月'], // For formatting
	            dayNames: ['星期日', '星期二', '星期三', '星期四', '星期五', '星期五', '星期六'], // For formatting
	            dayNamesShort: ['周日', '周一', '周二', '周三', '周四', '周五', '周六'], // For formatting
	            dayNamesMin: ['日','一','二','三','四','五','六'], // Column headings for days starting at Sunday
	            weekHeader: 'Wk', // Column header for week of the year
	            dateFormat: 'yy-mm-dd', // See format options on parseDate
	            firstDay: 0, // The first day of the week, Sun = 0, Mon = 1, ...
	            isRTL: false, // True if right-to-left language, false if left-to-right
	            showMonthAfterYear: false, // True if the year select precedes month, false for month then year
	            yearSuffix: '年' // Additional text to append to the year in the month headers
            });

            $('#from').datetimepicker({ 
            	addSliderAccess: true,
	            sliderAccessArgs: { touchonly: false },
	            onClose: function(dateText, inst) {
		            if ($('#to').val() != '') {
			            var testStartDate = $('#from').datetimepicker('getDate');
			            var testEndDate = $('#to').datetimepicker('getDate');
			            if (testStartDate > testEndDate)
				            $('#to').datetimepicker('setDate', testStartDate);
		            }
		            else {
			            $('#to').val(dateText);
		            }
	            },
	            onSelect: function (selectedDateTime){
		            $('#to').datetimepicker('option', 'minDate', $('#from').datetimepicker('getDate') );
	            }
            });
            $('#to').datetimepicker({ 
            	addSliderAccess: true,
	            sliderAccessArgs: { touchonly: false },
	            onClose: function(dateText, inst) {
		            if ($('#from').val() != '') {
			            var testStartDate = $('#from').datetimepicker('getDate');
			            var testEndDate = $('#to').datetimepicker('getDate');
			            if (testStartDate > testEndDate)
				            $('#from').datetimepicker('setDate', testEndDate);
		            }
		            else {
			            $('#from').val(dateText);
		            }
	            },
	            onSelect: function (selectedDateTime){
		            $('#from').datetimepicker('option', 'maxDate', $('#to').datetimepicker('getDate') );
	            }
            });

            $('#task_StartTime').datetimepicker({ 
            	addSliderAccess: true,
	            sliderAccessArgs: { touchonly: false },
	            onClose: function(dateText, inst) {
		            if ($('#task_EndTime').val() != '') {
			            var testStartDate = $('#task_StartTime').datetimepicker('getDate');
			            var testEndDate = $('#task_EndTime').datetimepicker('getDate');
			            if (testStartDate > testEndDate)
				            $('#task_EndTime').datetimepicker('setDate', testStartDate);
		            }
		            else {
			            $('#task_EndTime').val(dateText);
		            }
	            },
	            onSelect: function (selectedDateTime){
		            $('#task_EndTime').datetimepicker('option', 'minDate', $('#task_StartTime').datetimepicker('getDate') );
	            }
            });
            $('#task_EndTime').datetimepicker({ 
            	addSliderAccess: true,
	            sliderAccessArgs: { touchonly: false },
	            onClose: function(dateText, inst) {
		            if ($('#task_StartTime').val() != '') {
			            var testStartDate = $('#task_StartTime').datetimepicker('getDate');
			            var testEndDate = $('#task_EndTime').datetimepicker('getDate');
			            if (testStartDate > testEndDate)
				            $('#task_StartTime').datetimepicker('setDate', testEndDate);
		            }
		            else {
			            $('#task_StartTime').val(dateText);
		            }
	            },
	            onSelect: function (selectedDateTime){
		            $('#task_StartTime').datetimepicker('option', 'maxDate', $('#task_EndTime').datetimepicker('getDate') );
	            }
            });

        });
    </script>
}
@* end section scripts *@ 